<template>
    <Row class="permissions-page" :gutter="10">
        <Col span="18">
        <Card :dis-hover="true">
            <p slot="title">
                <Icon type="person-stalker"></Icon> 所有角色
            </p>
            <div slot="extra">
                <Button type="ghost" class="add-new-btn" icon="plus" @click="showModal('role')">新增</Button>
                <!-- <Button type="success" class="save-btn" v-if="selectChanged">保存</Button> -->

            </div>
            <div class="all-user">
                <can-edit-table ref="roleTable" v-model="rolesData" :columns-list="rolesColumns" @on-change="handleChangeRole" :highlight-row="true"
                    @on-row-click="rowClick" @on-delete="deleteRole"></can-edit-table>
            </div>
        </Card>
        <Card :dis-hover="true" class="user-card">
            <p slot="title">
                <Icon type="person-stalker"></Icon> 所有用户
            </p>
            <div slot="extra">
                <Button type="ghost" class="add-new-btn" icon="plus" @click="showModal('users')">新增</Button>
                <!-- <Button type="success" class="save-btn" v-if="selectChanged">保存</Button> -->
            </div>
            <div class="all-user">
                <can-edit-table ref="usersTable" v-model="usersData" :columns-list="usersColumns" @on-change="handleChangeUser" :highlight-row="true" @on-delete="deleteUser"></can-edit-table>
            </div>
        </Card>
        </Col>

        <Col span="6">
        <Card :dis-hover="true" class="permissions-card">
            <Button type="success" class="save-btn" slot="extra" :disabled="permissionsNotChange || !selectRole" @click="savePermissions()">保存</Button>
            <p slot="title">
                <Icon type="locked"></Icon> {{selectRole?selectRole.role:'我'}}的权限
            </p>
            <Tree :data="treeArr" show-checkbox multiple ref="roleTree" @on-check-change="treeCheckChange"></Tree>
        </Card>

        </Col>
        <Modal :mask-closable="false" v-model="showAddModal" :title="addType == 'role'?'添加角色':'添加用户'" :loading="showAddModalLoading" @on-ok="modalOk(addType)">
            <Form :model="addRoleModalForm" ref="addRoleModalForm" :rules="addRoleModalRules" v-if="addType == 'role' || addType == ''">
                <FormItem label="请为新的管理角色命名" prop="name">
                    <Input v-model="addRoleModalForm.name" placeholder="请输入角色名"></Input>
                </FormItem>
                <FormItem label="" prop="isAutoAllocation">
                    <Checkbox v-model="addRoleModalForm.isAutoAllocation">默认分配全部权限</Checkbox>
                </FormItem>
            </Form>
            <Form :model="addUsersModalForm" ref="addUsersModalForm" :rules="addUsersModalRules" v-if="addType == 'users' || addType == ''">
                <FormItem label="新用户名（登录使用）" prop="name">
                    <Input v-model="addUsersModalForm.name" placeholder=""></Input>
                </FormItem>
                <FormItem label="E-mail" prop="mail">
                    <Input v-model="addUsersModalForm.mail" placeholder="填写Email"></Input>
                </FormItem>
                <FormItem label="电话" prop="tel">
                    <Input v-model="addUsersModalForm.tel" placeholder="请输入手机号"></Input>
                </FormItem>
                <FormItem label="设置密码" prop="password">
                    <Input v-model="addUsersModalForm.password" type="password" placeholder="请输入新用户登录密码"></Input>
                </FormItem>
                <FormItem label="分配角色" prop="roles">
                    <Select v-model="addUsersModalForm.roles" placeholder="选择角色">
                        <Option v-for="(item,index) in rolesData" :key="index" :value="item.uuid">{{item.role}}</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    </Row>
</template>
<script src='./permissions.js'>
</script>
<style lang="scss" src="./permissions.scss">

</style>